<script setup>
import { ref,reactive,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const isshowMenu = ref('关闭')
const closeMenu = () => {
    let asideBox = document.getElementById('asideBox');
    let rightBox = document.querySelector('.rightBox');
    asideBox.classList.toggle('hidemenus');
    if(asideBox.classList.contains('hidemenus')){
      rightBox.style = 'padding-left:0px;';
      isshowMenu.value = '打开'
    }else{
      rightBox.style = 'padding-left:200px;';
      isshowMenu.value = '关闭'
    }
}
const isshowMenus = ref('/')
const routerList = ref(store.state.routerList)
const goToUrl = (url,name) => {
    store.commit('addMenuToRouter',[url,name])
}

const xx = (name) => {
  store.commit('xx',name);
}

onMounted(() => {
    // 监听页面刷新前，将vuex数据存在本地
    window.addEventListener("beforeupload", () => {
      localStorage.setItem("stateInfo", JSON.stringify(store.state.routerList));
    });
    // 刷新后，将本地对应数据替换到vuex，并将本地对应数据删除
    if (localStorage.getItem("stateInfo")) {
      store.state.routerList = Object.assign(
          [],
          store.state.routerList,
          JSON.parse(localStorage.getItem("stateInfo"))
        )
    }
    // localStorage.removeItem("stateInfo")
})
 
</script>

<template>
   <main>
        <aside id="asideBox">
          <h1>左侧导航</h1>
          <div class="treeList">
               <p @click="goToUrl('/','首页')">首页</p>
               <p @click="goToUrl('/','A')">A</p>
               <p @click="goToUrl('/b','B')">B</p>
               <p @click="goToUrl('/c','C')">C</p>
          </div>
        </aside>
        <section class="rightBox">
             <header>
                  <div class="closeBox" @click="closeMenu">{{isshowMenu}}导航</div>
                  <div class="logos">我的后台管理系统</div>
             </header>
             <section class="mainBox">
                <div class="routerList">
                     <router-link v-for="(item,index) in store.state.routerList" :key="index" :to="item.path" :class="item.path == store.state.isshowMenus?'actives':''">{{item.name}} <abbr @click="xx(item.path)">x</abbr></router-link>
                </div>
                <div class="viewbox">
                  <router-view></router-view>
                </div>
             </section>
        </section>
   </main>
</template>

<style scoped>
    :root{--fontsize:12px; --color: #fff;}
    main {padding: 0; margin: 0; list-style-type: none; width: 100vw; height: 100vh;}
    main aside{width: 200px; position: fixed; left: 0; top: 0; bottom: 0; background: #0F1C2E; z-index: 100; padding: 15px; box-sizing: border-box; overflow: auto; transition: all 1s; color: #fff;}
    aside h1{ font-size: var(--fontsize); color: var(--color);}
    main .rightBox{ padding-left: 200px; box-sizing: border-box; width: 100vw; height: 100vh; background-color: #e0e0e0; transition: all 1s;}
    main header{height: 50px; background-color: #4d648d; padding: 15px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
    .closeBox{ margin-right: 15px; background-color: #acc2ef; color: #fff; font-size: var(--fontsize); padding: 5px;}
    .mainBox{ font-size: var(--fontsize); background-color: #FFFFFF; color:#333; height: 100%; width: 100%;}
    .hidemenus{ transform: translateX(-200px);}
    .treeList{ display: flex; flex-direction: column; align-items: center; margin-top: 10px;}
    .treeList p{ padding: 0; margin: 0 0 10px 0; width: 100%; text-align: center; font-size: var(--fontsize); background: #cee8ff; color: #333;}
    .treeList p a{ display: block; width: 100%; height: 100%;}
    .router-link-exact-active{background-color: #333; color: red!important;}
    .routerList{ background-color: #cee8ff; padding: 10px 0;}
    .routerList a{ padding: 12px 20px; position: relative; margin-right: 5px; font-size: var(--fontsize); color: #333;;}
    .routerList a abbr{ position: absolute; right: 5px; top: 5px; font-size: 12px;}
    .viewbox{ padding: 10px; box-sizing: border-box;}
    .logos{ color: #fff;}
</style>
